﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta name="renderer" content="webkit">
    <title>立即登录</title>
    <link rel="stylesheet" href="~/theme/css/base.css">
    <link rel="stylesheet" type="text/css" href="~/theme/css/login.css">
    <link rel="stylesheet" type="text/css" href="~/layui-v2.5.4/layui/css/modules/layer/default/layer.css">
    <script src="~/theme/js/jquery-3.1.1.min.js"></script>
    <script src="~/theme/js/checkcode.js"></script>
    <script src="~/layui-v2.5.4/layui/lay/modules/layer.js"></script>
    <style>
        /*发送验证码样式*/
        #sendCode {
            float: right;
            background: #ff6700;
            border: none;
            color: white;
            font-weight: 800;
            border-radius: 3px;
            padding: 6%;
            margin-right: -85%;
        }

        #pwdLogin {
            font-size: 14px;
        }

        #telLogin {
            font-size: 14px;
            margin-left: 13%;
        }

        #code {
            width: 40%;
        }

        .left {
            width: 40%;
        }
    </style>
</head>
<body>
    <div class="w">
        <div id="logo">
            <a href="/Home/Index">
                <img src="~/theme/icon/logo.png" alt="">
            </a>
            <b></b>
        </div>

        <a href="#" class="q_link fr">
            <b class="fl"></b>
            登录页面，改进意见
        </a>
    </div>
    <div id="content">
        <div class="login-wrap">
            <div class="w">
                <div class="login-form">
                    <div class="login-tab login-tab-l">
                        <a href="javascript:;" id="telLogin">手机登录</a>
                    </div>
                    <div class="login-tab login-tab-r">
                        <a href="javascript:;" id="pwdLogin">密码登录</a>
                    </div>
                    <div class="login-box" style="visibility: visible; display:block">
                        <div class="mt tab-h"></div>
                        <div class="msg-wrap"></div>
                        <div class="mc">
                            <div class="form">
                                <form action="" id="formlogin" method="post" onSubmit="return false;">

                                    <!-- 密码登录 -->
                                    <div class="item item-fore1 item-error Login1">
                                        <label for="loginname" class="login-label name-label"></label>
                                        <input type="text" name="loginname" id="username" class="itxt" tabindex="1" autocomplete="off" placeholder="请输入用户名">
                                        <span class="clear-btn" style="display:inline;"></span>
                                    </div>
                                    <!-- 密码输入框fore2 -->
                                    <div id="entry" class="item item-fore2 Login1" style="visibility: visible">
                                        <label class="login-label pwd-label" for="nloginpwd"></label>
                                        <input type="password" name="" id="password" name="nloginpwd" class="itxt itxt-error" tabindex="2" autocomplete="off" placeholder="请输入你的密码">
                                        <span class="clear-btn" style="display: inline;"></span>
                                        <span class="capslock" style="display: none;">
                                            <b></b>
                                            大小写锁定已打开
                                        </span>
                                    </div>


                                    <!-- 手机登录 -->
                                    <div class="item item-fore1 item-error Login2">
                                        <label for="loginname" class="login-label name-label"></label>
                                        <input type="text" name="loginname" id="phone" class="itxt" tabindex="1" autocomplete="off" placeholder="请输入你的手机号">
                                        <span class="clear-btn" style="display:inline;"></span>
                                    </div>
                                    <!-- 手机验证码 -->
                                    <div id="entry" class="item item-fore2 Login2" style="visibility: visible;width:50%">
                                        <label class="login-label pwd-label" for="nloginpwd"></label>
                                        <input type="text" name="" id="code" name="nloginpwd" style="width:67%" class="itxt itxt-error" tabindex="2" autocomplete="off" placeholder="请输入验证码">
                                        <span class="clear-btn" style="display: inline;"></span>
                                        <input type="button" id="sendCode" value="发送验证码" />
                                    </div>



                                    <!-- 图片验证码开始 fore3-->
                                    @*<div id="o-authcode" class="item item-vcode item-fore3 hide ">
                                        <input type="text" name="" id="authcode" class="itxt itxt02" name="authcode" tabindex="3">
                                        <input type="button" id="code" class="verify-code">
                                        <a href="javascript:;" onclick='createCode();'>看不清换一张</a>
                                    </div>*@

                                    <!-- 自动登录开始fore4 -->
                                    <div class="item item-fore4">
                                        <div class="safe">
                                            <span>
                                                <input type="checkbox" name="chkRememberMe" id="savePwd" tabindex="3">
                                                <label for>自动登录</label>
                                            </span>
                                            <span class="forget-pw-safe">
                                                <a href="">忘记密码</a>
                                            </span>
                                        </div>
                                    </div>

                                    <!-- 登录按钮开始 -->
                                    <div class="item item-fore5">
                                        <div class="login-btn">
                                            <a href="javascript:;" class="btn-img btn-entry submit " name="submit" id="btn" tabindex="6">登&nbsp;&nbsp;&nbsp;&nbsp;录</a>         
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="qrcode-login">
                        <div class="mc">
                            <div class="qrcode-error-2016">
                                <div class="qrcode-error-mask"></div>
                                <p class="err-cont">服务器出错</p>
                                <a href="javascript:void(0)" class="refresh-btn">刷新</a>
                            </div>
                            <div class="qrcode-main">

                                @*<div class="qrcode-img" style="">
                                    <img src="~/theme/login/code.png" alt="">
                                    <div class="qrcode-error-02 hide" id="J-qrcodeerror" style="display: none;">
                                        <a href="#none">
                                            <span class="error-icon"></span>
                                            <div class="txt">
                                                网络开小差咯
                                                <span class="ml10">刷新二维码</span>
                                            </div>
                                        </a>
                                    </div>
                                </div>*@


                                <div class="qrcode-help" style="display: none;"></div>
                            </div>

                            <div class="qrcode-panel">
                                <ul>
                                    <li class="fore1">
                                        <span>打开</span>
                                        <a href="">
                                            <span class="red">手机歪秀购物 </span>
                                        </a>
                                    </li>
                                    <li>扫一扫登录</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="coagent" id="kbCoagent">
                        <ul>
                            <li class="extra-r">
                                <div class="regist-link">
                                    <a href="/Home/Register" class="">
                                        <b></b>立即注册
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="login-banner" style="background-color: #ea4949">
                <div class="w">
                    <div id="banner-bg" class="i-inner" style="background: url(~/theme/login/a1.jpg);"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="w">
        <div id="footer-2013">
            <div class="links">
                <a href="">关于我们</a>
                |
                <a href="">联系我们</a>
                |
                <a href="">人才招聘</a>
                |
                <a href="">商家入驻</a>
                |
                <a href="">广告服务</a>
                |
                <a href="">手机京东</a>
                |
                <a href="">友情链接</a>
                |
                <a href="">销售联盟</a>
                |
                <a href="">English site</a>
            </div>
            <div style="padding-left:10px">
                <p style="padding-top:10px; padding-bottom:10px; color:#999">网络文化经营许可证：浙网文[2013]0268-027号| 增值电信业务经营许可证：浙B2-20080224-1</p>
                <p style="padding-bottom:10px; color:#999">信息网络传播视听节目许可证：1109364号 | 互联网违法和不良信息举报电话:0571-81683755</p>
            </div>
        </div>
    </div>
    
</body>
</html>
<script type="text/javascript">
    $(function () {
         //当页面显示时手机登录Div隐藏
         $("#pwdLogin").css("color", "red");
         $(".Login2").hide();

        //密码登录
         $("#pwdLogin").click(function () {
            $(".Login1").show();
            $(".Login2").hide();
            $("#pwdLogin").css("color", "red");
            $("#telLogin").css("color", "white");
            $("#phone").val("");
            $("#code").val("");                        
         });

        //手机登录
        $("#telLogin").click(function () {
            $(".Login1").hide();
            $(".Login2").show();
            $("#telLogin").css("color", "red");
            $("#pwdLogin").css("color", "white");
            $("#username").val("");
            $("#password").val("");
        });


        //登录按钮触发事件
        $("#btn").click(function () {
            //获取input属性值
            var savePwd = $("#savePwd").prop("checked");
            var username = $("#username").val();
            var password = $("#password").val();
            var code = $("#code").val();
            var phone = $("#phone").val();
            //密码登录：登录之前判断用户名和密码是否为空
            if (username != "" && password != "") {
                var data = {};
                data.UserName = $("#username").val();
                data.Pwd = $("#password").val();
                //自动登录
                if (savePwd) {
                    $.ajax({
                        url: "/Login/LoginSavePwd",
                        data: data,
                        type: "post",
                        success: function (result) {
                            if (result.Success) {
                                layer.alert('登录成功！', {
                                    title: '提示框',
                                    icon: 1,
                                });
                                location.href = "/Home/Index";
                                layer.close(index);
                            }
                            else {
                                layer.alert('用户名或密码错误！', {
                                    title: '提示框',
                                    icon: 0,
                                });
                            }
                        }
                    });
                } else {
                    $.ajax({
                        url: "/Login/LoginNotSavePwd",
                        data: data,
                        type: "post",
                        success: function (result) {
                            if (result.Success) {
                                layer.alert('登录成功！', {
                                    title: '提示框',
                                    icon: 1,
                                });
                                location.href = "/Home/Index";
                                layer.close(index);
                            }
                            else {
                                layer.alert('用户名或密码错误！', {
                                    title: '提示框',
                                    icon: 0,
                                });
                            }
                        }
                    });
                }               
             //手机登录：登录之前判断手机号和验证码是否为空
            } else if (code != "" && phone != "") {
                var data = {};              
                data.TelPhone = $("#phone").val();
                data.Code = $("#code").val();
                $.ajax({
                    url: "/Common/CheckCode",
                    type: "post",
                    data: data,
                    success: function (result) {
                        if (result.Success) {
                            layer.alert('登录成功！', {
                                title: '提示框',
                                icon: 1,
                            });
                            location.href = "/Home/Index";
                            layer.close(index);
                        }
                        else {
                            layer.alert('手机或验证码错误！', {
                                title: '提示框',
                                icon: 0,
                            });
                        }
                    }
                });
            }      
        });


        //发送验证码按钮触发事件
        $("#sendCode").click(function () {
            var telphone = $("#phone").val();
            $.ajax({
                url: "/Common/AddSmsInfo?tel=" + telphone,
                type: "post",
                success: function (result) {
                    if (result.Success) {
                        alert("发送成功!");
                        SendCode();
                    }
                    else {
                        alert("发送失败！");
                    }
                }
            })
        });

        //发送验证码方法
        function SendCode() {
            //禁用
            $("#sendCode").attr("disabled", "disabled");
            $("#sendCode").css("background-color", "gray");
            var time = 60;
            $(this).val(time + "S之后再发送");
            var timer = setInterval(function () {
                if (time > 0) {
                    time--;
                    $("#sendCode").val(time + "S之后再发送");
                }
                else {
                    $("#sendCode").removeAttr("disabled").css("background-color", " #ff6700");
                    $("#sendCode").val("发送验证码");
                    clearInterval(timer);
                }
            }, 1000);
        }
    });
</script>